<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>伪数组转成数组</title>
</head>
<body>
  <input type="checkbox" name="box"> 看书
  <input type="checkbox" name="box"> 唱歌
  <input type="checkbox" name="box"> 跳舞
  <input type="checkbox" name="box"> 绘画
  <script>
    /*
      1、什么是伪数组？
        和数组长的很像，有length属性，但是无法使用数组中的方法

      2、如何判断是否是一个数组？
        (1) isArray()
        (2) 看看arr.push, arr.pop是否存在

      3、如何将一个类数组转成标准数组？
    */

    var arrDom = document.querySelectorAll('input[name=box]'); //元素集合，伪数组
    var arr = [1,2,3,4]; //真数组

    // 判断是否是一个数组，方法1：
    console.log(arr.push,'arr'); //结果是一个function
    console.log(arrDom.push,'arrDom'); //undefined

    // 判断是否是一个数组，方法2：
    console.log(Array.isArray(arr)); //true
    console.log(Array.isArray(arrDom)); //false


    /*****************************************************************************/


    // 如何将类数组转换成标准数组

    // 方法1：扩展运算符 ...  推荐这种方法，最简单
    var arrDom1 = [...arrDom];
    console.log(arrDom1, 'arrDom1')

    // 方法2：slice方法, slice:截取数组   arr.slice(start, end); 包首不包尾，若是不传参数，则默认将整个数组截取下来
    // 但是slice是数组的方法，伪数组是没有这个方法的，所以，我们可以让arrDom继承数组中的这个方法
    // B.fn.call(A) call能继承方法，这相当于A对象可以使用B对象下面的方法了
    var arrDom2 = Array.prototype.slice.call(arrDom);
    console.log(arrDom2, 'arrDom2')

    // 方法3： Array.from() ，这个方法也很简单，但是有兼容问题，IE不识别这个方法
    var arrDom3 = Array.from(arrDom);
    console.log(arrDom3, 'arrDom3');

    // 方法4： for循环
    var arrDom4 = [];
    for (var i=0; i<arrDom.length; i++) {
      arrDom4.push(arrDom[i])
    }
    console.log(arrDom4, 'arrDom4');







  </script>
</body>
</html>